import React, { useCallback, useEffect, useState } from 'react'
import {Modal,Button, Form, Input } from 'antd'
import {addRole} from '@/api/role'
// @ts-ignore
import routeModuleList from '@/router/mergeRouting'
import TreeData from '@/pages/system/role/treedata'

const RoleModal= () => {
  const [visible, setVisible] = useState(false);
  const [tree,setTree] = useState<any>([])
  const [form] = Form.useForm();

  useEffect(()=>{
    form.setFieldsValue({
      TreeRole:tree
    })
  },[tree])

  const onCreate = async (values: any) => {
    console.log('Received values of form: ', values);
    const {roleName,TreeRole} = values
    const res = await addRole({role_name:roleName,jurisdiction:JSON.stringify(TreeRole),is_state:true})
    console.log(res)
    setVisible(false);
  };
  const showModal = useCallback(() => {
    setVisible(true);
  },[visible])

  const handleCancel =useCallback(
    () => {
      setVisible(false)
    },[visible]
  )
  const roleFiler = (arr) =>{
    if (!arr) return
    return arr.map((item) => {
      if(!item.routes){
        return {
          title:item.name,
          key:item.meta?.key,
        }
      } else {
        return {
          title:item.name,
          key:item.meta?.key,
          children:roleFiler(item.routes)
        }
      }
    })
  }

  const onSelect = useCallback((selectedKeys: React.Key[], info: any) => {
    console.log('selected', selectedKeys, info);
  },[tree]
)
  const onCheck = useCallback((checkedKeys: React.Key[], info: any) => {
    console.log('onCheck', checkedKeys, info);
    setTree(checkedKeys)
  },[tree]);


  return (
    <div style={{marginBottom:"1rem"}}>
      <Button type="primary" onClick={showModal}>
        添加角色
      </Button>
      <Modal
        getContainer={false}
        title="添加角色"
        visible={visible}
        forceRender={true}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              form.resetFields();
              onCreate(values).then(r => r);
            })
            .catch(info => {
              console.log('Validate Failed:', info);
            });
        }}

        onCancel={handleCancel}
      >
        <Form
          form={form}
          name="form_in_modal"
          initialValues={{ modifier: 'public' }}

          layout="vertical"
        >
          <Form.Item
            label="角色名称"
            name="roleName"
            rules={[{ required: true, message: '角色名称不能为空!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="备注"
            name="mark"
            rules={[{ required: true, message: '角色备注不能为空!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="角色权限"
            name="TreeRole"
            rules={[{required:true, message:"请选择角色权限!"}]}
          >
            <TreeData
              onSelect={onSelect}
              onCheck={onCheck}
              treeData={roleFiler(routeModuleList)}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )

}

export default RoleModal
